<template>
  <div class="box">
    <div class="querybox">
      <!-- <el-input v-model="query" placeholder="请输入查询内容" style="width: 200px; right: 10px;" /> -->
      <!-- <el-button type="primary" @click="sysUserPage">查询</el-button> -->
      <el-button
        type="primary"
        @click="add"
      >新增</el-button>
    </div>
    <el-table
      :data="tableData"
      border
    >
      <el-table-column
        prop="userName"
        label="用户名"
      />
      <el-table-column
        prop="loginName"
        label="登录名"
      />
      <el-table-column label="创建时间">
        <template slot-scope="scope">
          <div>{{ timeTranslateHMS(scope.row.created, true) }}</div>
        </template>
      </el-table-column>
      <el-table-column label="更新时间">
        <template slot-scope="scope">
          <div>{{ timeTranslateHMS(scope.row.updateTime, true) }}</div>
        </template>
      </el-table-column>
      <el-table-column label="上次修改密码时间">
        <template slot-scope="scope">
          <div>{{ timeTranslateHMS(scope.row.lastChangePwdTime, true) }}</div>
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="deleted"
        label="用户状态"
      /> -->
      <!-- <el-table-column
        label="状态"
      >
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-text="启用"
            inactive-text="禁用"
            @change="statusChange(scope.row)"
          />
        </template>
      </el-table-column> -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            class="tb-mr"
            type="text"
            size="small"
            @click="viewUser(scope.row.id, scope.index)"
          >查看</el-button>
          <!-- <el-button type="text" size="small" @click="updUser(scope.row, scope.index)">修改</el-button> -->
          <!-- <el-button type="text" size="small" @click="delUser(scope.row, scope.index)">删除</el-button> -->
          <el-popconfirm
            :title="'确定删除【' + scope.row.loginName + '】此用户吗？'"
            @onConfirm="sysUserDelete(scope.row.id)"
          >
            <el-button
              slot="reference"
              class="tb-mr"
              type="text"
              size="small"
              @confirm="sysUserDelete(scope.row.id)"
            >删除</el-button>
          </el-popconfirm>
          <el-popconfirm
            :title="'重置后密码为：【123456】，确定吗？'"
            @onConfirm="resetPassword(scope.row.id)"
          >
            <el-button
              slot="reference"
              class="tb-mr"
              type="text"
              size="small"
              @confirm="resetPassword(scope.row.id)"
            >重置密码</el-button>
          </el-popconfirm>
          <!-- <el-button type="text" size="small" @click="updatePassword(scope.row, scope.index)">修改密码</el-button> -->
          <!-- <el-popover
            v-model="popoverVisible"
            placement="right"
            width="400"
            trigger="click"
            @hide="clearPassWord"
          >
            <el-form ref="form" :model="form" :rules="rules" :inline="true">
              <el-form-item label="新密码" :label-width="formLabelWidth">
                <el-input v-model="form.password" autocomplete="off" />
              </el-form-item>
            </el-form>
            <div style="text-align: center;">
              <el-button @click="clearPassWord">取消</el-button>
              <el-button type="primary" @click="updatePassword(scope.row, form.password)">确 定</el-button>
            </div>
            <el-button slot="reference" type="text" size="small">修改密码</el-button>
          </el-popover> -->
        </template>
      </el-table-column>
    </el-table>
    <el-row style="margin-top: 10px;">
      <el-pagination
        :total="total"
        :current-page="filters.pageNum"
        :page-size="filters.pageSize"
        layout="total, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleSizeChange"
      />
    </el-row>

    <el-dialog
      :title="editType === 'add' ? '新增' : '查看'"
      :visible.sync="dialogFormVisible"
      :before-close="beforeClose"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        :inline="true"
      >
        <el-form-item
          label="用户名"
          prop="userName"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="form.userName"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item
          label="登录名"
          prop="loginName"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="form.loginName"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item
          v-if="editType === 'add'"
          label="密码"
          prop="password"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="form.password"
            autocomplete="off"
          />
        </el-form-item>
      </el-form>
      <!-- <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="姓名" prop="username" :label-width="formLabelWidth">
          <el-input v-model="form.username" autocomplete="off" />
        </el-form-item>
        <el-form-item label="电话" prop="mobile" :label-width="formLabelWidth">
          <el-input v-model="form.mobile" autocomplete="off" />
        </el-form-item>
      </el-form> -->
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="resetForm('form')">取 消</el-button>
        <el-button
          type="primary"
          @click="closeDialogForm('form')"
        >确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

// import { } from '@/api/user'
import { sysUserPage, sysUserGet, sysUserSave, sysUserDelete, updatePassword, resetPassword } from '@/api/sysuser'
import { bizorg_trans } from '@/api/org'
import { timeTranslateHMS } from '@/utils/formatdate'
// import { makeFormData } from '@/utils/index'
// import Upload from '@/components/Upload'
export default {
  name: 'Documentation',
  components: {
    // Upload
  },
  data() {
    return {
      timeTranslateHMS,
      filters: {
        mobile: '',
        username: '',
        pageNum: 1,
        pageSize: 10
      },
      form: {
        userName: '',
        loginName: '',
        password: ''
      },
      total: 0,
      rules: {
        userName: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        loginName: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      },
      tableData: [],
      formLabelWidth: '120px',
      dialogFormVisible: false,
      query: '',
      editType: null,
      popoverVisible: false
    }
  },
  mounted() {
    this.sysUserPage()
  },
  methods: {
    clearPassWord() {
      this.popoverVisible = false
      this.form.password = ''
    },
    bizOrgChange(orgId) {
      bizorg_trans({ orgId }).then((res) => {
      })
    },
    // dialog关闭事件
    beforeClose() {
      this.resetForm('form')
    },
    // logo上传成功监听
    onSuccess(res) {
      this.form.logo = res
    },
    headImgUrlOnSuccess(res) {
      this.form.headImgUrl = res
    },
    // 新增操作
    add() {
      this.editType = 'add'
      this.dialogFormVisible = true
    },
    // 分页切换监听
    handleSizeChange(pageNum) {
      this.filters.pageNum = pageNum
      this.sysUserPage()
    },
    // 用户列表
    sysUserPage() {
      const pageNum = this.filters.pageNum - 1
      sysUserPage({ ...this.filters, pageNum }).then(res => {
        const result = res.data
        this.tableData = result.content
        this.total = result.totalPages
      }).catch(err => {
        console.log(err)
      })
    },
    // 删除用户
    sysUserDelete(id) {
      this.editType = 'delete'
      //   this.tableData.splice(row, 1)
      sysUserDelete(id).then(res => {
        // res.data.logo = 'https://dss1.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/pic/item/bd315c6034a85edf3d432b7d44540923dc5475a5.jpg'
        // this.form = Object.assign(this.form, res.data)
        this.form = res.data
        // let result = res.data;
        // this.tableData = result.users;
        this.$message({
          message: '删除成功！',
          type: 'success'
        })
        this.sysUserPage()
      }).catch(err => {
        console.log(err)
      })
    },
    // 重置用户密码
    resetPassword(userId) {
      this.editType = 'reset'
      //   this.tableData.splice(row, 1)
      resetPassword({ userId }).then(res => {
        // res.data.logo = 'https://dss1.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/pic/item/bd315c6034a85edf3d432b7d44540923dc5475a5.jpg'
        // this.form = Object.assign(this.form, res.data)
        this.form = res.data
        // let result = res.data;
        // this.tableData = result.users;
        this.$message({
          message: '重置成功！',
          type: 'success'
        })
        this.sysUserPage()
      }).catch(err => {
        console.log(err)
      })
    },
    updatePassword(row, password) {
      this.editType = 'update'
      const postData = Object.assign(row, { password })
      updatePassword(postData).then(res => {
        this.form = res.data
        // let result = res.data;
        // this.tableData = result.users;
        this.$message({
          message: '修改成功！',
          type: 'success'
        })
        this.sysUserPage()
        this.clearPassWord()
      }).catch(err => {
        console.log(err)
      })
    },
    // 修改用户
    updUser(row, index) {
      this.editType = 'update'
      this.dialogFormVisible = true
    },
    // 查看用户
    viewUser(id) {
      this.editType = 'view'
      this.dialogFormVisible = true
      this.sysUserGet(id)
    },
    // 用户详情
    sysUserGet(id) {
      sysUserGet(id).then(res => {
        // res.data.logo = 'https://dss1.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/pic/item/bd315c6034a85edf3d432b7d44540923dc5475a5.jpg'
        // this.form = Object.assign(this.form, res.data)
        this.form = res.data
        // let result = res.data;
        // this.tableData = result.users;
      }).catch(err => {
        console.log(err)
      })
    },
    // 弹窗关闭触发函数
    closeDialogForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.sysUserSave(formName)
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.dialogFormVisible = false
      this.$refs[formName].resetFields()
    },
    // 新增用户
    sysUserSave(formName) {
      //   let { staff, org, admin } = this.form
      // var extInfo = new FormData();
      // extInfo.append('city',city);
      // let form_Data = new FormData();
      // let result = makeFormData({ extInfo: staff, org: org, admin })
      const obj = { ...this.form }
      obj.created = timeTranslateHMS(obj.created, null, '/')
      obj.lastChangePwdTime = timeTranslateHMS(obj.lastChangePwdTime, null, '/')
      obj.updateTime = timeTranslateHMS(obj.updateTime, null, '/')
      sysUserSave(obj).then((res) => {
        this.$message({
          message: '修改成功！',
          type: 'success'
        })
        this.resetForm(formName)
        this.sysUserPage()
        // this.dialogFormVisible = false
      })
    },
    statusChange(row) {
      // {id: row.id, status: row.status}
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  margin: 20px 30px;
  .form {
    margin-top: 50px;
  }
  .querybox {
    text-align: right;
    margin-bottom: 20px;
  }
}
.box-card {
  margin-bottom: 15px;
}
.tb-mr {
  margin-right: 2px;
}
</style>
